<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户中心机械师MACHENIKE官网-正品商城</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="shortcut icon" href="images/favicon.ico">
	<style>
		*{margin: 0;padding: 0;}
		a{display: block;text-decoration: none;}
		.head::after,
		.label::after{
			clear: both;
			content: "";
			display: block;
		}
		.container{
			width: 1134px;
			margin: 0 auto;
		}
		.head{
			height: 100px;
			display: inline-block;
		}
		.logo{
			width: 86px;
			margin-top: 20px;
			float: left;
		}
		.logo img{
			width: 100%;
			height: 100%;
		}
		h2{
			float: left;
			font-size: 30px;
			font-weight: 400;
			margin-top: 15px;
			margin-left: 10px;
			color: #000;
		}
		h2 span{
			font-size: 12px;
			margin-top: 5px;
			display: block;
		}


		.banner{
			position: relative;
			width: 100%;
			height: 557px;
			background: url(images/login_bg.png) -200px;
			background-size: cover;
		}
		.login_kuang{
			width: 400px;
			height: 500px;
			background-color: #fff;
			position: absolute;
			top: 40px;
			left: 50%;
			margin-left: 180px;
		}
		.login_kuang>h3{
			text-align: center;
			color: #000;
			font-size: 26px;
			font-weight: 400;
			line-height: 100px;
		}
		.login_kuang form{
			display: block !important;
		    width: 324px;
		    padding-top: 10px;
		    position: relative;
		    margin: 0 auto;
		}
		.ipt-txt{
			background: #fff;
		    width: 100%;
		    display: block;
		    /*height: 20px;*/
		    line-height: 20px;
		    padding: 12px 10px;
		    box-sizing: border-box;
		    border: 1px solid #e6e6e6;
		    color: #333;
		    font-size: 14px;
		    font-weight: 100;
		    outline: none;
			margin-top: 10px;
		}
		.ipt-pas{
		}

		.huadong{
			width: 100%;
			margin: 0 auto;
			margin-top: 16px;
		    color: #666;
		    font-size: 12px;
		    position: relative;
		}
		.huadong input{
			padding-right: 5rem;
		}
		.huadong span{
			position: absolute;
			right: 2rem;
			top: 50%;
			transform: translateY(-50%);
		}
		.ipt-btn{
			width: 100%;
			background: linear-gradient(to right, rgba(0,128,255,1) 1%,rgba(2,181,255,1) 100%);
			margin-top: 15px;
			color: #fff;
			line-height: 42px;
		    cursor: pointer;
		    border-radius: 4px;
			border: none;
		}

		.label{
			margin-top: 16px;
			color: #999;
			font-size: 12px;
			line-height: 18px;
		}
		.label input{
			vertical-align: -3px;
		}
		.label a{
			color: #999;
			float: right;
		}
		.register{
			font-size: 14px;
			line-height: 30px;
			text-align: center;
			color: #02a0ff;
		}
		.pes{
			text-align: center;
			line-height: 40px;
		    font-size: 16px;
		    position: relative;
		    margin-top: 10px;
		    color: #8c8d8f;
		    font-weight: normal;
		    position: relative;
		}
		.pes:before{
			content: "";
			display: block;
			width: 90px;
			height: 1px;
			background-color: #8c8d8f;
			top: 20px;
			left: 15px;
			position: absolute;
		}
		.pes:after{
			content: "";
			display: block;
			width: 90px;
			height: 1px;
			background-color: #8c8d8f;
			top: 20px;
			right: 15px;
			position: absolute;
		}
		

		.f{
			width: 28px;
			display: inline-block;
			height: 28px;
			margin: 0 4px;
		}
		.qq{
			background: url(images/qq.png);
			background-size: 100% 100%;
			margin-left: 126px;
		}
		.weixin{
			background: url(images/weixin.png);
			background-size: 100% 100%;
		}

		footer{
			text-align: center;
			font-size: 12px;
			color: #919191;
			padding-top: 80px;
			padding-bottom: 20px;
		}
		footer .f-nav{
			margin-bottom: 10px;
		}
		footer .f-nav a{
			color: #919191;
			padding: 0 6px;
			display: inline-block;
		}

		.load{
			width: 200px;
			height: 0;
			overflow: hidden;
			color: #ffffff;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			position: absolute;
			left: 50%;
			top: 0;
			transform: translateX(-50%);
			transition: 0.2s;
			background-color: rgba(0,0,0,0.5);
		}
		.load img{
			vertical-align: -3px;
			padding-left: 7px;
		}
		
		@media(max-width: 992px){
			.container{
				width: 100%;
			}
			.login_kuang{
				left: auto;
			}
			.wr-lo{
				text-align: center;
			}
			.qq{
				margin-left: 0;
			}
			.load{
				display: none;
			}
		}

		@media (max-width: 668px) {
			.container,
			.login_kuang form{
				width: 100%;
			}
			.banner{
				background: none;
				height: auto;
			}
			.ipt-txt{
				height: auto;
				box-sizing: border-box;
			}
			.login_kuang{
				width: 100%;
				height: auto;
				margin-left: 0;
				position: static;

			}
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">
			<a href="index.html" class="head">
				<div class="logo">
					<img src="images/malogo.png" alt="">
				</div>
				<h2>机械师官网商城<span>打造高性能电竞装备+游戏全场景体验</span></h2>
			</a>
		</div>
	</div>
	<div class="banner">
		<div class="login_kuang">
			<h3>欢迎登录官网</h3>
			<form action="">
				<input type="text" placeholder="用户名/手机/邮箱" class="ipt-txt">
				<input type="password" placeholder="密码" class="ipt-txt ipt-pas">
				<div class="huadong">
					<input type="text" placeholder="请输入验证码" class="ipt-txt">
					<span class="sp-hua"></span>
				</div>
				<button type="button" class="ipt-btn" src="javascript:;">立即登录</button>
				<div class="label">
					<label for="">
						<input type="checkbox" name="" id="">自动登陆
					</label>
					<a href="#">忘记密码</a>
				</div>
				<a href="#" class="register">注册新帐户</a>
				<a href="#" class="pes">其他账户登录</a>
				<p class="wr-lo">
					<a href="#" class="qq f"></a>
					<a href="#" class="weixin f"></a>
				</p>
			</form>
		</div>
		<div class="load">
			<p>登录中<img src="images/icon.gif" alt=""></p>
		</div>
	</div>
	<footer>
		<div class="f-nav">
			<a href="#">机械式论坛</a>|
			<a href="#">神游网</a>|
			<a href="#">优易网</a>|
			<a href="#">以旧换新</a>|
		</div>
		<p>© 2014-2019 www.machenike.com 机械师 版权所有 全国免费咨询电话：4006 999 999 鲁ICP备14032650号-1</p>
	</footer>

	<script>
		window.onload=function(){
		    //每1秒刷新时间
			createCode(4);
		}
		var code = "";
		function createCode(length) {
		    var codeLength = parseInt(length); //验证码的长度
		    var checkCode = document.getElementsByClassName("sp-hua")[0];
		    ////所有候选组成验证码的字符，当然也可以用中文的
		    var codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
		    //循环组成验证码的字符串
		    for (var i = 0; i < codeLength; i++){
		        var charNum = Math.floor(Math.random() * 35);
		        code += codeChars[charNum];
		    }
		    if (checkCode){
		        //为验证码区域添加样式名
		        checkCode.className = "code";
		        //将生成验证码赋值到显示区
		        checkCode.innerHTML = code;
		    }
		}

		var ipt = document.querySelectorAll(".ipt-txt");
		var btn = document.querySelector(".ipt-btn");
		var load = document.querySelector(".load");

		function demo(){
			if(ipt[0].value!="15612716033"){
				alert("请输入正确的账号")
			}else if(ipt[1].value!="666666"){
				alert("请输入正确的密码")
			}else if(ipt[2].value!=code){
				alert("验证码错误")
			}else if (ipt[0].value == "15612716033" || ipt[1].value == "666666" || ipt[2].value!=code) {
				load.style.height = '50px';
				setTimeout("this.location.href = '" + "index.html" + "'",1000);
			}
		}
	    btn.onclick=function (){
			demo()
		}
		document.onkeydown = function (e) {
    	var theEvent = window.event || e;
	    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
	        if (code == 13) {
	        	demo()
	        }
	    }
	</script>
</body>
</html>